<!--
 * @Descripttion:
 * @version: 商品选择列表有如下功能：
 1. 列可以扩展
 2. 方法可更换
 * @Author: cxguo
 * @Date: 2020-07-07 07:18:24
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 15:05:16
-->
<template>
  <div>
    <vxe-grid
      ref="table"
      class="grid"
      border
      size="mini"
      resizable
      highlight-hover-row
      show-footer
      :loading="loading"
      :columns="columnsData"
      :data="tableData"
      :checkbox-config="{trigger: 'row', highlight: true, range: true}"
      @checkbox-change="onCheckboxChange"
      @checkbox-all="onCheckboxChange"
    />
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { columns } from './mixins'
import { selectContainerStockByStore } from '@/api/goods/goods-sku.js'

export default {
  mixins: [columns],
  props: {
    postMethod: {
      type: Function,
      default: selectContainerStockByStore
    },
    searchData: {
      type: Object,
      default: () => { return {} }
    },
    /**
     * 价格类别
     */
    priceCat: {
      type: String,
      default: ''
    },
    /**
     * 价格类别名称
     */
    priceCatName: {
      type: String,
      default: '参考进货价'
    }
  },
  data() {
    return {
      tableData: [],
      pageInfo: {
        current: 1, // 当前页
        size: 20, // 每页数据条数
        sort: '', // 排序字段
        order: 'desc', // 排序方向
        total: 0 // 总数居量
      },
      loading: false
    }
  },
  computed: {
    'columnsData': function() {
      const priceCols = this.priceCat
        ? [{ field: 'price', title: this.priceCatName, width: 100 }]
        : []
      const stockCols = [{ field: 'canUseQty', title: '可用库存', width: 100 }]
      const defaultColumns = this.defaultColumns
      const result = [...defaultColumns, ...priceCols]
      result.push(...stockCols)
      return result
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.getListData()
    },
    getListData(params = { data: this.searchData, page: this.pageInfo }) {
      this.loading = true
      this.postMethod(params).then(res => {
        this.loading = false
        const records = res.data.records
        records.forEach(item => {
          const { priceStr, unitIdStr, unitIsbaseStr,
            originQuantity, waitQuantityIn,
            waitQuantityOut, quantityIn, quantityOut } = item
          const canUseQty = this.$amount(originQuantity)
            .add(quantityIn).subtract(quantityOut)
            .add(waitQuantityIn).subtract(waitQuantityOut).format()
          const priceObj = JSON.parse(priceStr || '{}')
          // 设置值
          const price = priceObj[this.priceCat]
          item.price = price
          item.canUseQty = canUseQty
          item.unitId = this.getBaseUnitId(unitIdStr, unitIsbaseStr)
          item.quantity = 0
        })
        this.tableData = records
        this.pageInfo.total = res.data.total
      })
    },
    getBaseUnitId(unitIdStr, unitIsbaseStr) {
      const unitIsbaseArr = unitIsbaseStr.split(',')
      const unitIdArr = unitIdStr.split(',')
      const index = unitIsbaseArr.findIndex(item => { return Number(item) === 1 })
      return unitIdArr[index]
    },
    onCheckboxChange(params) {
      const { records, row, checked } = params
      if (checked) {
        records.forEach(item => {
          this.$set(item, 'quantity', 1)
        })
      } else {
        if (row) {
          this.$set(row, 'quantity', 0)
        } else {
          const tableData = this.tableData
          tableData.forEach(item => {
            this.$set(item, 'quantity', 0)
          })
        }
      }
    },
    onQtyBlur(params) {
      this.handleCheckTable(params)
    },
    onQtyFocus(params) {
      const { $e } = params
      $e.stopPropagation()
    },
    onQtyClick(params) {
      const { $e } = params
      $e.stopPropagation()
    },
    onQtyChange(params) {
      this.handleCheckTable(params)
    },
    handleCheckTable(params) {
      const { row, $rowIndex, data } = params
      const { quantity } = row
      const currentData = data[$rowIndex]
      if (quantity > 0) {
        this.$refs.table.setCheckboxRow(currentData, true)
      } else {
        this.$refs.table.setCheckboxRow(currentData, false)
      }
    },
    handleSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getListData()
    },
    handleCurrentChange(val) {
      this.pageInfo.current = val
      this.getListData()
    },
    // export api
    setAllCheckboxRow(b) {
      this.$refs.table.setAllCheckboxRow(b)
    },
    getCheckboxRecords() {
      const data = this.$refs.table.getCheckboxRecords() || []
      data.forEach(item => {
        item._XID = null
      })
      return data
    },
    resetData() {
      this.setAllCheckboxRow(false)
      this.tableData.forEach(item => {
        this.$set(item, 'quantity', 0)
      })
    }
  }
}
</script>

<style>

</style>
